<template>
  <view class="vehicle-verify-detail-page page-content">
    <up-navbar title="车辆详情" :autoBack="false" :fixed="true" bgColor="transparent" :border="false" placeholder
      @click="handleBackClick">
      <template>
        <view></view>
      </template>
    </up-navbar>

    <view class="status-text normal-card padding-20">
      <text>认证状态：</text>
      <text class="status">{{ getStatusText(data.isAuthor) }}</text>
    </view>

    <view class="normal-card padding-20">
      <view class="card-header">
        <text>用户信息</text>
      </view>

      <view class="card-content">
        <view class="card-tr">
          <view class="card-td">手机号：</view>
          <view class="card-td">{{ data.phone }}</view>
        </view>
        <view class="card-tr">
          <view class="card-td">用户昵称：</view>
          <view class="card-td">{{ data.nickName }}</view>
        </view>
        <view class="card-tr">
          <view class="card-td">车主姓名：</view>
          <view class="card-td">{{ data.driverName }}</view>
        </view>
      </view>
    </view>

    <view class="normal-card padding-20">
      <view class="card-header">
        <text>车辆信息</text>
      </view>

      <view class="card-content">
        <view class="card-tr">
          <view class="card-td">车牌号：</view>
          <view class="card-td">{{ data.carPlate }}</view>
        </view>
        <view class="card-tr">
          <view class="card-td">车牌颜色：</view>
          <view class="card-td">{{ getPlateColorText(data.plateColor) }}</view>
        </view>
        <view class="card-tr">
          <view class="card-td">车辆类型：</view>
          <view class="card-td">{{ getCarTypeText(data.carType) }}</view>
        </view>
        <view class="card-tr">
          <view class="card-td">车辆认证照：</view>
          <view class="card-td"><up-album :urls="urls2"></up-album></view>
        </view>
      </view>
    </view>

    <!-- 审核操作按钮，固定在底部 -->
    <view class="bottom-action flex">
      <up-button class="button" type="primary" :disabled="data.isAuthor === 1" @click="handleApprove">审核通过</up-button>
      <up-button class="button" type="warning" :disabled="data.isAuthor === 1" @click="handleReject">审核驳回</up-button>

    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { getVehicleVerifyDetail, vehicleVerifyAudit } from '@/api';
import { ref } from 'vue'

const urls2 = ref([
  'https://img2.baidu.com/it/u=1645519925,2752800354&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800',
  'https://q5.itc.cn/q_70/images03/20250726/a433c72446ee48f0b21007d762989fd7.png',
]);

const data: any = ref<any>({
  id: "1",
  bizCode: "1",
  userId: null,
  nickName: "测试用户",
  phone: "13311110001",
  driverName: "测试用户",
  plateColor: 0,
  carType: 0,
  isAuthor: 0,
  carPlate: "川A.88888",
  driverPhoto: "http://baidu.com",
  carPhoto: "http://baidu.com",
  authorTime: "2025-07-28 11:54:17",
  isDel: 0,
  errMsg: "审核意见",
  createTime: "2025-07-28 11:47:55",
  updateTime: "2025-07-28 03:54:45"
})

// 处理返回点击事件
const handleBackClick = () => {
  uni.redirectTo({
    url: '/pages/vehicle-verify/list/index'
  })
}

// 获取认证状态文本
const getStatusText = (status) => {
  switch (status) {
    case 1:
      return '审核中'
    case 2:
      return '认证失败'
    case 3:
      return '认证成功'
    default:
      return '未认证'
  }
}

// 获取车辆颜色文本
const getPlateColorText = (status) => {
  switch (status) {
    case 0:
      return '蓝牌'
    case 1:
      return '黄牌'
    case 2:
      return '绿牌'
    case 3:
      return '白牌'
    case 4:
      return '黑牌'
    default:
      return '未知'
  }
}

// 获取车辆类型文本
const getCarTypeText = (status) => {
  switch (status) {
    case 1:
      return '小车'
    case 2:
      return '大车'
    default:
      return '未知'
  }
}

// 审核通过
const handleApprove = async () => {
  const auditData = {
    bizCode: data.value.bizCode,
    isAuthor: 3, // 认证成功
    errMsg: '审核通过'
  };

  // 占位接口调用 - 后续替换为实际接口
  await vehicleVerifyAudit(auditData)
  uni.showToast({
    title: '审核通过成功',
    icon: 'success'
  })
}

// 审核驳回
function handleReject() {
  uni.showModal({
    title: '提示',
    content: '确定要驳回吗？',
    success: (res) => {
      if (res.confirm) {
        const auditData = {
          bizCode: data.value.bizCode,
          isAuthor: 2, // 认证失败
          errMsg: '' // 用户输入的驳回原因
        };

        vehicleVerifyAudit(auditData).then((res) => {
          if (res.success) {
            uni.showToast({
              title: '审核通过成功',
              icon: 'success'
            })
          }
        });
      }
    }
  })
}


onLoad(async (options) => {
  // res.value = await getVehicleVerifyDetail({
  //   code: options.id
  // })
})

</script>

<style lang="scss" scoped>
.vehicle-verify-detail-page {
  padding: 20rpx;

  .status-text {
    text-align: center;
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
    padding: 40rpx 0;
  }

  .bottom-action {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30rpx;
    background-color: #fff;

    .button+.button {
      margin-left: 30rpx;
    }

  }

}
</style>